<template>
  <div class="pageLoading" :style="style">
     <Spin fix>
       <Icon type="load-c" size=18 class="Loading-spin-icon-load"></Icon>
       <div>Loading</div>
     </Spin>
  </div>
</template>
<script>
    export default {
        props: {
            size:{
               type:Number,
               default:600
            }
        },
        data() {
            return {
              style:{
                height:this.size + 'px',
              }
            }
        },
        methods: {},
        components: {},
        mounted() {
        },
        created() {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteUpdate(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteLeave(to, from, next) {
            next(vm => {

            })
        }
    }
</script>

<style lang="less" scoped="">
  .pageLoading{
      text-align: center;
      vertical-align: middle;
      position: relative;

    .ivu-spin{
      color: #9e2828;
    }

    .Loading-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
  }
</style>
